<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表页</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/leibiao.css">
    <style>
        body {
            background-image: url(https://bpic.588ku.com/back_origin_min_pic/21/03/15/c1fc050ad23e700e001dfaabe13f0cc8.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .box,
        .content {
            background-color: rgba(255, 255, 255, 0.6);
        }
    </style>
</head>

<body>

    <div class="header container">
        <span>列表页</span>
        <p class="active">
            <a href="./index.html">返回首页</a>
        </p>
    </div>

    <div class="box container">
        <div class="item">
            <p>分类</p>
            <ul class="cate">
                <!-- JS 渲染 -->
                <!-- <li class="active">全部</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li> -->
            </ul>
        </div>
        <div class="item">
            <p>筛选</p>
            <ul class="filter">
                <li data-type="" class="active">全部</li>
                <li data-type="hot">热销</li>
                <li data-type="sale">折扣</li>
            </ul>
        </div>
        <div class="item">
            <p>折扣</p>
            <ul class="sale">
                <li data-type="10" class="active">全部</li>
                <li data-type="5">5</li>
                <li data-type="6">6</li>
                <li data-type="7">7</li>
                <li data-type="8">8</li>
                <li data-type="9">9</li>
            </ul>
        </div>
        <div class="item">
            <p>排序</p>
            <ul class="sort">
                <li data-type="id" data-method="ASC" class="active">综合升序</li>
                <li data-type="id" data-method="DESC">综合降序</li>
                <li data-type="price" data-method="ASC">价格升序</li>
                <li data-type="price" data-method="DESC">价格降序</li>
                <li data-type="sale" data-method="ASC">折扣升序</li>
                <li data-type="sale" data-method="DESC">折扣降序</li>
            </ul>
        </div>
        <div class="item">
            <p>搜索</p>
            <ul>
                <input class="search" type="text">
            </ul>
        </div>
        <div class="item pagination">
            <p>分页</p>
            <div>
                <span class="left disable">&lt;</span>
                <span>1 / 10</span>
                <span class="right">&gt;</span>
            </div>
            <select>
                <option value="12">12</option>
                <option value="16">16</option>
                <option value="20">20</option>
                <option value="24">24</option>
            </select>
            <input type="text" value="1">
            <button>跳转</button>
        </div>
    </div>

    <ul class="content container">
        <!-- <li>
            <div class="show">
                <img src="" alt="">
                <span class="hot active">热销</span>
                <span class="sale active">折扣</span>
            </div>
            <div class="info">
                <p class="title">sdfkjkhasdfjghsd圣诞节分公司交付给是刚发的古生代够浮点数公费师范广东省分公司的集合返回计算 交互的发过火规范的股份 </p>
                <p class="price">
                    <span class="current">￥ 100.00</span>
                    <span class="old">￥ 100.00</span>
                </p>
                <button>加入购物车</button>
            </div>
        </li> -->
    </ul>

    <script src="../js/gather.js"></script>
    <script src="../js/leibiao.js"></script>
</body>

</html>